<html>
  <head>
    <title>Scalene</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!-- Latest compiled and minified CSS -->
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <link href="prism.css" rel="stylesheet" />
    <style>
      .table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
	  padding: 1px; border-spacing: 0px; border:none;
      }
    form label:hover, form button:hover {
      background-color: black;
      color: white;
    }

    form label:active, form button:active {
      background-color: blue;
      color: white;
    }      
    </style>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4JXPHEBMTY"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      
      gtag('config', 'G-4JXPHEBMTY');
    </script>

    <script src="example-profile.js"></script>
    <script src="prism.js"></script>
    <script src="tablesort.js"></script>
    <script src="tablesort.number.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.21.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.0"></script>
    <script defer src="scalene-gui.js" type="text/javascript"></script>
    <script defer src="scalene-demo.js" type="text/javascript"></script>
  </head>
  <body>
    <a href="https://github.com/plasma-umass/scalene">
      <p class="text-center">
	<img src="scalene-image.png" height="100">
      </p>
    </a>
    <p />
    <form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
      <div class="form-group">
	<div class="d-flex justify-content-center">
	  <label for='fileinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">Select a profile (.json)</label>
	  <input style="height: 0; width: 10; opacity:0" type='file' id='fileinput' accept='.json' onchange="loadFile();">
	  <!-- <label for='demoinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">demo</label>
	  <input style="height: 0; width: 0; opacity:0" type='button' id='demoinput' accept='.json' onclick="loadDemo();">
-->
	</div>
      </div>
    </form>
	<div class="d-flex justify-content-center">
	  <details>
	    <summary style="font-size:0.8rem; color: blue">advanced options</summary>
	  <!-- <label for='demoinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">demo</label>
	  <input style="height: 0; width: 0; opacity:0" type='button' id='demoinput' accept='.json' onclick="loadDemo();">
	  -->
	  <B style="font-size:0.8rem">Proposed optimizations</B><BR />
	  <label for='api-key' style="font-size: 0.8rem">Enter an <a href="https://beta.openai.com/signup">OpenAI key</a> to enable:</label>
	  <input type="text" style="font-size: 0.8rem" size="22" placeholder="(OpenAI API key)" id="api-key" oninput="checkApiKey(event.target.value)"></input>
	  <span id='valid-api-key'></span>
	  <br />
	  <div>
	    <input type="radio" name="optimize-radio" id="optimize-performance" value="performance" checked>
	    <label style="font-size: 0.8rem" for="optimize-performance">
	      Optimize runtime performance
	    </label>
	  </div>
	  <div>
	    <input type="radio" name="optimize-radio" id="optimize-memory" value="memory">
	    <label style="font-size: 0.8rem" for="optimize-memory">
	      Optimize memory efficiency
	    </label>
	  </div>
	  <input type="checkbox" id="use-gpu-checkbox" name="use-gpu-checkbox-label" onclick="try { window.localStorage.setItem('scalene-gpu-checkbox', document.getElementById('use-gpu-checkbox').checked); } catch {}">
	  <label style="font-size: 0.8rem" for="use-gpu-checkbox">
	    Include GPU optimizations
	  </label>
	  <br />
	  <font style="font-size: 0.8rem">
	    Click on an explosion (&#128165;) to see proposed optimizations for a region of code,<br />
	    or on a lightning bolt (&#9889;) to propose optimizations for a specific line.<br />
	    Click again to generate a different one.<br />
	    <em>Note that optimizations are AI-generated and may not be correct.</em>
	    <br />
	  </font>
	  <br />
	  <!--
	      <br />
    <form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
      <div class="form-group">
	      <label for='fileinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">Load a profile (.json)</label>
	      <input style="height: 0; width: 10; opacity:0" type='file' id='fileinput' accept='.json' onchange="loadFile();"></input>
      </div>
    </form>
    -->
	  </details>
	</div>
    <div id="profile">
      <p class="text-center">
	Profile your Python code
	with <a href="https://github.com/plasma-umass/scalene">Scalene</a>,
	then select the generated
	file <tt>profile.json</tt>.
      </p>
      <p class="text-center">Click <a href="" id="demo-text">demo</a> to explore an
	example Scalene profile.
      </p>
      <nav class="navbar fixed-bottom navbar-default justify-content-center">
	<div class="container justify-content-center">
	  <p class="text-center">
	    <font style="font-size:small">
	      <a href="https://github.com/plasma-umass/scalene-gui">source code on Github</a>
	    </font>
	  </p>
	</div>
      </nav>
    </div>
  </body>
</html>
